<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师端程序展示界面</title>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #student-actions {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .action-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <h1>教师端程序展示界面</h1>
    <div id="student-actions">
        <h2>学生操作实时显示</h2>
        <div id="actions-container"></div>
    </div>

    <script>
        const socket = io('/teacher');
        
        // 监听学生操作
        socket.on('studentAction', (data) => {
            console.log('收到学生操作:', data);
            
            // 显示学生操作
            const actionDiv = document.createElement('div');
            actionDiv.className = 'action-item';
            
            // 格式化显示不同类型的操作
            let actionText = '';
            if(data.type === 'radio') {
                actionText = `学生选择了单选按钮: ${data.name} = ${data.value}`;
                document.querySelector(`input[name="${data.name}"][value="${data.value}"]`)?.checked = true;
            } else if(data.type === 'text') {
                actionText = `学生填写了文本框: ${data.correct} = ${data.value}`;
                document.querySelector(`input[data-correct="${data.correct}"]`)?.value = data.value;
            } else if(data.type === 'select') {
                actionText = `学生选择了下拉选项: ${data.id} = ${data.value}`;
                document.getElementById(data.id)?.value = data.value;
            }
            
            actionDiv.textContent = actionText;
            document.getElementById('actions-container').prepend(actionDiv);
            
            // 限制显示的操作数量
            const maxActions = 20;
            const actions = document.querySelectorAll('.action-item');
            if(actions.length > maxActions) {
                actions[actions.length-1].remove();
            }
        });
    </script>
</body>
</html>